<template>
   <div class="table-main ba-table-box">
      <div class="table-header">
        <div class="table-header-left">
          <el-tooltip content="刷新" placement="top">
              <el-button v-blur color="#40485b" class="table-header-operate" type="info" @click="onRefresh">
                  <Icon name="fa fa-refresh" />
              </el-button>
          </el-tooltip>
          <el-tooltip content="添加" placement="top">
              <el-button v-blur class="table-header-operate" type="primary" @click="onAdd">
                  <Icon name="fa fa-plus" />
                  <span class="table-header-operate-text">添加</span>
              </el-button>
          </el-tooltip>
        </div>
      </div>
      <el-table
          v-loading="tableLoading"
          ref="tableRef"
          class="ba-data-table w100"
          header-cell-class-name="table-header-cell"
          default-expand-all
          :data="tableData"
          row-key="id"
          :border="true"
          :max-height="height.state.mainHeight-32-60-62"
          stripe
      >
          <el-table-column label="图标" width="100" align="center">
            <template #default="scope">
              <el-image
                  style="width: 70px; height: 70px"
                  :src="`${baseUrl}${scope.row.icon}`"
                  fit="fill"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="标签名" width="250" :show-overflow-tooltip="true"/>
          <el-table-column prop="desc" label="描述" :show-overflow-tooltip="true"/>
          <el-table-column prop="sort" label="排序" width="100" align="center"/>
          <el-table-column label="操作" width="180" align="center">
            <template #default="scope">
                <el-button type="warning" plain @click="onEdit(scope.row)">修改</el-button>
                <el-button type="danger" plain @click="onDel(scope.row)">删除</el-button>
            </template>
          </el-table-column>
      </el-table>  
      <div class="table-pagination">
        <el-pagination
            :currentPage="pageConfig.page"
            :page-size="pageConfig.limit"
            :page-sizes="[10, 20, 50, 100]"
            background
            layout="total, sizes, ->, prev, pager, next, jumper"
            :total="total"
            @size-change="onTableSizeChange"
            @current-change="onTableCurrentChange"
        ></el-pagination>
      </div>
      <Form ref="formRef" @success="getList"></Form>
   </div>
</template>



<script setup lang="ts">
import { reactive, ref, onActivated } from 'vue'
import { useHeight } from '/@/stores/height'
import { page,del } from '/@/api/tag'
import { ElNotification,ElMessageBox } from 'element-plus'
import Form from './components/form/index.vue'
import {tag} from './type'

const baseUrl: string = import.meta.env.VITE_AXIOS_BASE_URL as string
const tableData = ref<tag[]>([])
const tableLoading = ref(false)
const formRef = ref()
const height = useHeight()

const pageConfig = reactive({
  page:1,
  limit:10
})
const total = ref(0)

const getList = async() => {
  tableLoading.value = true
  const {data} = await page(pageConfig)
  tableData.value = data.list
  total.value = data.total
  tableLoading.value = false
}

const onTableSizeChange = (size:number) => {
  pageConfig.limit = size
  getList()
}

const onTableCurrentChange = (current:number) => {
  pageConfig.page = current
  getList()
}

const onRefresh = () => {
  getList()
}

const onAdd = () => {
  formRef.value.handleAdd()
}

const onEdit = (val:tag) => {
  formRef.value.handleEdit(val.id)
}

const onDel = (val:tag) => {
  ElMessageBox.confirm(
  '确定要删除该标签么?',
  '提示',
  {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    draggable: true,
  }
  )
  .then(async () => {
    await del(val.id)
    ElNotification({
      type: 'success',
      message: '删除成功'
    })
    getList()
  })
}

onActivated(()=>{
  getList()
})

</script>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'tag',
})
</script>

<style scoped lang="scss">

</style>